<template>
  <view class="all-docs-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-left" @click="goBack">
        <u-icon name="arrow-left" color="#ffffff" size="24"></u-icon>
      </view>
      <view class="nav-center">
        <text class="nav-title">所有收文</text>
      </view>
      <view class="nav-right"></view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-header" @click="toggleSearchExpand">
        <view class="search-header-left">
          <u-icon name="search" size="18" color="#1678ff"></u-icon>
          <text class="search-header-title">筛选条件</text>
        </view>
        <view class="search-header-right">
          <text class="expand-text">{{ searchExpanded ? '收起' : '展开' }}</text>
          <u-icon
            :name="searchExpanded ? 'arrow-up' : 'arrow-down'"
            size="16"
            color="#999"
          ></u-icon>
        </view>
      </view>

      <view class="search-form" v-show="searchExpanded">
        <view class="form-row">
          <input
            class="search-input"
            v-model="searchForm.sourceDocumentTitle"
            :placeholder="
              activeTab === 'receive' ? '请输入已完结的收文标题' : '请输入审批中的收文标题'
            "
          />
        </view>
        <view class="form-row">
          <input
            class="search-input"
            v-model="searchForm.receiveDocumentSymbol"
            placeholder="请输入来文文号"
          />
        </view>

        <!-- 时间筛选 -->
        <view class="form-row time-filter-row">
          <text class="filter-label">时间筛选</text>
          <view class="time-picker-group">
            <picker
              mode="selector"
              :range="timeModeOptions"
              :value="timeModeIndex"
              @change="handleTimeModeChange"
              class="time-mode-picker"
            >
              <view class="picker-input mode-picker">
                <text>{{ timeModeOptions[timeModeIndex] }}</text>
                <u-icon name="arrow-down" size="12" color="#999" />
              </view>
            </picker>
            <picker
              :mode="pickerMode"
              :value="timeValue"
              @change="handleTimeChange"
              :start="startDate"
              :end="endDate"
              class="time-value-picker"
            >
              <view class="picker-input value-picker">
                <text class="time-text" :class="{ placeholder: !timeDisplayText }">
                  {{ timeDisplayText || '选择时间' }}
                </text>
                <u-icon name="calendar" color="#1678ff" size="16" />
              </view>
            </picker>
            <view class="clear-btn" v-if="timeValue" @click.stop="clearTime">
              <u-icon name="close-circle-fill" size="16" color="#999" />
            </view>
          </view>
        </view>

        <view class="search-buttons">
          <text class="search-btn" @click="handleSearch">查询</text>
          <text class="reset-btn" @click="handleReset">重置</text>
        </view>
      </view>
    </view>

    <!-- 选项卡切换 -->
    <view class="status-switch">
      <view
        class="status-tab"
        :class="{ active: activeTab === 'receive' }"
        @click="switchTab('receive')"
      >
        <u-icon
          name="checkmark-circle"
          :color="activeTab === 'receive' ? '#ffffff' : '#666666'"
          size="18"
        ></u-icon>
        <text class="tab-text">已完结</text>
      </view>
      <view class="status-tab" :class="{ active: activeTab === 'send' }" @click="switchTab('send')">
        <u-icon
          name="clock-fill"
          :color="activeTab === 'send' ? '#ffffff' : '#666666'"
          size="18"
        ></u-icon>
        <text class="tab-text">审批中</text>
      </view>
    </view>

    <!-- 数据列表 -->
    <view class="list-section">
      <!-- 已完结收文列表 -->
      <view v-if="activeTab === 'receive'" class="list-wrapper">
        <!-- <view class="list-header">
          <text class="list-title">已完结收文列表</text>
          <text class="list-count">共{{ receivePagination.total }}条</text>
        </view> -->

        <!-- 滚动列表区域 -->
        <scroll-view class="list-scroll" scroll-y :show-scrollbar="false">
          <!-- 加载状态 -->
          <view class="loading-state" v-if="receiveLoading">
            <text class="loading-text">加载中...</text>
          </view>

          <view class="receive-list" v-else-if="receiveList.length > 0">
            <view
              class="receive-item"
              v-for="item in receiveList"
              :key="item.id"
              @click="handleReceiveView(item)"
            >
              <view class="item-header">
                <view class="item-title">
                  <text class="title-text">{{ item.sourceDocumentTitle }}</text>
                  <view
                    :class="[
                      'urgency-badge',
                      `urgency-${item.sourceDocumentUrgencyLevel || 'normal'}`,
                    ]"
                  >
                    <text class="badge-text">{{
                      getUrgencyLevelText(item.sourceDocumentUrgencyLevel)
                    }}</text>
                  </view>
                </view>
                <text class="item-time">{{
                  formatDateTime(item.receiveDocumentTime || item.createdAt)
                }}</text>
              </view>
              <view class="item-content">
                <text class="item-desc"
                  >来文文号：{{ item.receiveDocumentSymbol || '无文号' }}</text
                >
                <text class="item-desc">来文单位：{{ item.sourceCompanyName || '未知单位' }}</text>
              </view>
              <view class="item-footer">
                <view class="item-info">
                  <text class="info-text"
                    >收文时间：{{
                      formatDateTime(item.receiveDocumentTime || item.createdAt)
                    }}</text
                  >
                </view>
                <view class="item-actions">
                  <text class="action-btn" @click.stop="handleReceiveView(item)">查看</text>
                </view>
              </view>
            </view>
          </view>

          <view class="empty-state" v-else>
            <text class="empty-icon">✅</text>
            <text class="empty-text">暂无已完结的收文数据</text>
          </view>
        </scroll-view>

        <!-- 分页固定底部 -->
        <view class="pagination-section" v-if="receivePagination.total > 0">
          <view class="pagination-info">
            <text
              >共{{ receivePagination.total }}条，第{{ receivePagination.current }}/{{
                Math.ceil(receivePagination.total / receivePagination.size)
              }}页</text
            >
          </view>
          <view class="pagination-buttons">
            <text
              class="page-btn"
              :class="{ disabled: receivePagination.current <= 1 }"
              @click="handleReceivePrevPage"
            >
              上一页
            </text>
            <text
              class="page-btn"
              :class="{
                disabled:
                  receivePagination.current >=
                  Math.ceil(receivePagination.total / receivePagination.size),
              }"
              @click="handleReceiveNextPage"
            >
              下一页
            </text>
          </view>
        </view>
      </view>

      <!-- 审批中收文列表 -->
      <view v-if="activeTab === 'send'" class="list-wrapper">
        <!-- <view class="list-header">
          <text class="list-title">审批中收文列表</text>
          <text class="list-count">共{{ sendPagination.total }}条</text>
        </view> -->

        <!-- 滚动列表区域 -->
        <scroll-view class="list-scroll" scroll-y :show-scrollbar="false">
          <!-- 加载状态 -->
          <view class="loading-state" v-if="sendLoading">
            <text class="loading-text">加载中...</text>
          </view>

          <view class="send-list" v-else-if="sendList.length > 0">
            <view
              class="send-item"
              v-for="item in sendList"
              :key="item.id"
              @click="handleSendView(item)"
            >
              <view class="item-header">
                <view class="item-title">
                  <text class="title-text">{{ item.sourceDocumentTitle }}</text>
                  <view
                    :class="[
                      'urgency-badge',
                      `urgency-${item.sourceDocumentUrgencyLevel || 'normal'}`,
                    ]"
                  >
                    <text class="badge-text">{{
                      getUrgencyLevelText(item.sourceDocumentUrgencyLevel)
                    }}</text>
                  </view>
                </view>
                <text class="item-time">{{
                  formatDateTime(item.receiveDocumentTime || item.createdAt)
                }}</text>
              </view>
              <view class="item-content">
                <text class="item-desc"
                  >来文文号：{{ item.receiveDocumentSymbol || '无文号' }}</text
                >
                <text class="item-desc">来文单位：{{ item.sourceCompanyName || '未知单位' }}</text>
              </view>
              <view class="item-footer">
                <view class="item-info">
                  <text class="info-text"
                    >收文时间：{{
                      formatDateTime(item.receiveDocumentTime || item.createdAt)
                    }}</text
                  >
                </view>
                <view class="item-actions">
                  <text class="action-btn" @click.stop="handleSendView(item)">查看</text>
                </view>
              </view>
            </view>
          </view>

          <view class="empty-state" v-else>
            <text class="empty-icon">⏳</text>
            <text class="empty-text">暂无审批中的收文数据</text>
          </view>
        </scroll-view>

        <!-- 分页固定底部 -->
        <view class="pagination-section" v-if="sendPagination.total > 0">
          <view class="pagination-info">
            <text
              >共{{ sendPagination.total }}条，第{{ sendPagination.current }}/{{
                Math.ceil(sendPagination.total / sendPagination.size)
              }}页</text
            >
          </view>
          <view class="pagination-buttons">
            <text
              class="page-btn"
              :class="{ disabled: sendPagination.current <= 1 }"
              @click="handleSendPrevPage"
            >
              上一页
            </text>
            <text
              class="page-btn"
              :class="{
                disabled:
                  sendPagination.current >= Math.ceil(sendPagination.total / sendPagination.size),
              }"
              @click="handleSendNextPage"
            >
              下一页
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { getAllReceiveDocuments } from '@/Api/receive'
import { getAllDocumentsall, type DocumentQueryParams } from '@/Api/document'

// 选项卡 - 支持通过页面参数控制默认显示的标签页
const activeTab = ref<'receive' | 'send'>('receive')

// 搜索展开/收起状态
const searchExpanded = ref(false)

// 搜索表单
const searchForm = reactive({
  searchForm: '',
  receiveDocumentSymbol: '',
})

// 时间筛选
const timeModeOptions = ['年', '月', '日']
const timeModeIndex = ref(2) // 默认选择"日"
const timeValue = ref<string>('')
const startDate = ref('2020-01-01')
const endDate = ref('2099-12-31')

// 收文数据
const receiveLoading = ref(false)
const receiveList = ref<any[]>([])
const receiveStats = reactive({
  total: 0,
})
const receivePagination = reactive({
  current: 1,
  size: 20,
  total: 0,
})

// 发文数据
const sendLoading = ref(false)
const sendList = ref<any[]>([])
const sendStats = reactive({
  total: 0,
})
const sendPagination = reactive({
  current: 1,
  size: 20,
  total: 0,
})

// 返回上一页
const goBack = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    uni.reLaunch({
      url: '/pages/index/index',
    })
  } else {
    uni.navigateBack({
      delta: 1,
    })
  }
}

// 切换搜索展开/收起
const toggleSearchExpand = () => {
  searchExpanded.value = !searchExpanded.value
}

// 切换选项卡
const switchTab = (tab: 'receive' | 'send') => {
  if (activeTab.value === tab) return
  activeTab.value = tab
  // 重置分页
  if (tab === 'receive') {
    receivePagination.current = 1
    loadReceiveData()
  } else {
    sendPagination.current = 1
    loadSendData()
  }
}

// Picker模式
const pickerMode = computed(() => {
  if (timeModeIndex.value === 0) return 'date' // 年选择
  if (timeModeIndex.value === 1) return 'date' // 月选择
  return 'date' // 日选择
})

// 时间显示文本
const timeDisplayText = computed(() => {
  if (!timeValue.value) return ''

  if (timeModeIndex.value === 0) {
    // 年
    return `${timeValue.value.substring(0, 4)}年`
  } else if (timeModeIndex.value === 1) {
    // 月
    const parts = timeValue.value.split('-')
    return `${parts[0]}年${parts[1]}月`
  } else {
    // 日
    const parts = timeValue.value.split('-')
    return `${parts[0]}年${parts[1]}月${parts[2]}日`
  }
})

// 时间模式改变
const handleTimeModeChange = (e: any) => {
  timeModeIndex.value = e.detail.value
  timeValue.value = '' // 清空已选时间
}

// 时间选择器改变
const handleTimeChange = (e: any) => {
  timeValue.value = e.detail.value
}

// 清空时间
const clearTime = () => {
  timeValue.value = ''
}

// 搜索
const handleSearch = () => {
  if (activeTab.value === 'receive') {
    receivePagination.current = 1
    loadReceiveData()
  } else {
    sendPagination.current = 1
    loadSendData()
  }
}

// 重置
const handleReset = () => {
  searchForm.title = ''
  searchForm.receiveDocumentSymbol = ''
  timeModeIndex.value = 2
  timeValue.value = ''
  if (activeTab.value === 'receive') {
    receivePagination.current = 1
    loadReceiveData()
  } else {
    sendPagination.current = 1
    loadSendData()
  }
}

// 加载已完结的收文数据
const loadReceiveData = async () => {
  receiveLoading.value = true
  try {
    const params: any = {
      ...searchForm,
      pageNum: receivePagination.current,
      pageSize: receivePagination.size,
      state: 0, // 0-已完结（approval_deadline IS NOT NULL）
    }

    // 时间筛选处理
    if (timeValue.value) {
      const parts = timeValue.value.split('-')
      const Y = parts[0]
      const M = parts[1]
      const D = parts[2]

      if (timeModeIndex.value === 0) {
        // 年
        params.startTime = `${Y}-01-01T00:00:00`
        params.endTime = `${Y}-12-31T23:59:59`
      } else if (timeModeIndex.value === 1) {
        // 月
        const lastDay = new Date(parseInt(Y), parseInt(M), 0).getDate()
        params.startTime = `${Y}-${M}-01T00:00:00`
        params.endTime = `${Y}-${M}-${String(lastDay).padStart(2, '0')}T23:59:59`
      } else {
        // 日
        params.startTime = `${Y}-${M}-${D}T00:00:00`
        params.endTime = `${Y}-${M}-${D}T23:59:59`
      }
    }

    const response = await getAllReceiveDocuments(params)
    if (response.code === 200) {
      const data = response.data
      receiveList.value = data.records || data || []
      receivePagination.total = data.total || receiveList.value.length
      receiveStats.total = receivePagination.total
    }
  } catch (error) {
    uni.showToast({
      title: '获取已完结收文列表失败',
      icon: 'none',
    })
  } finally {
    receiveLoading.value = false
  }
}

// 加载审批中的收文数据
const loadSendData = async () => {
  sendLoading.value = true
  try {
    const params: any = {
      ...searchForm,
      pageNum: sendPagination.current,
      pageSize: sendPagination.size,
      state: 1, // 1-审批中（approval_deadline IS NULL）
      unitType: 'external', // 审批中只查询外部分发数据
    }

    // 时间筛选处理
    if (timeValue.value) {
      const parts = timeValue.value.split('-')
      const Y = parts[0]
      const M = parts[1]
      const D = parts[2]

      if (timeModeIndex.value === 0) {
        // 年
        params.startTime = `${Y}-01-01T00:00:00`
        params.endTime = `${Y}-12-31T23:59:59`
      } else if (timeModeIndex.value === 1) {
        // 月
        const lastDay = new Date(parseInt(Y), parseInt(M), 0).getDate()
        params.startTime = `${Y}-${M}-01T00:00:00`
        params.endTime = `${Y}-${M}-${String(lastDay).padStart(2, '0')}T23:59:59`
      } else {
        // 日
        params.startTime = `${Y}-${M}-${D}T00:00:00`
        params.endTime = `${Y}-${M}-${D}T23:59:59`
      }
    }

    const response = await getAllReceiveDocuments(params)
    if (response.code === 200) {
      const data = response.data
      sendList.value = data.records || data || []
      sendPagination.total = data.total || sendList.value.length
      sendStats.total = sendPagination.total
    }
  } catch (error) {
    uni.showToast({
      title: '获取审批中收文数据失败',
      icon: 'none',
    })
  } finally {
    sendLoading.value = false
  }
}

// 分页处理
const handleReceivePrevPage = () => {
  if (receivePagination.current > 1) {
    receivePagination.current--
    loadReceiveData()
  }
}

const handleReceiveNextPage = () => {
  const totalPages = Math.ceil(receivePagination.total / receivePagination.size)
  if (receivePagination.current < totalPages) {
    receivePagination.current++
    loadReceiveData()
  }
}

const handleSendPrevPage = () => {
  if (sendPagination.current > 1) {
    sendPagination.current--
    loadSendData()
  }
}

const handleSendNextPage = () => {
  const totalPages = Math.ceil(sendPagination.total / sendPagination.size)
  if (sendPagination.current < totalPages) {
    sendPagination.current++
    loadSendData()
  }
}

// 查看已完结收文详情
const handleReceiveView = (item: any) => {
  uni.navigateTo({
    url: `/pages/document/receive/todo/detail?id=${item.id}&source=view`,
    fail: () => {
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none',
      })
    },
  })
}

// 查看审批中收文详情
const handleSendView = (item: any) => {
  uni.navigateTo({
    url: `/pages/document/receive/todo/detail?id=${item.id}&source=view`,
    fail: () => {
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none',
      })
    },
  })
}

// 获取紧急程度类型
const getUrgencyLevelType = (level: string) => {
  const typeMap: any = {
    normal: 'primary',
    high: 'warning',
    urgent: 'danger',
  }
  return typeMap[level] || 'primary'
}

// 获取紧急程度文本
const getUrgencyLevelText = (level: string) => {
  const textMap: any = {
    normal: '普通',
    high: '高',
    urgent: '紧急',
  }
  return textMap[level] || level || '普通'
}

// 获取发文类别类型
const getBizCategoryType = (category: string) => {
  const typeMap: any = {
    行政发文: 'primary',
    党务发文: 'success',
  }
  return typeMap[category] || 'info'
}

// 获取分发状态类型
const getDistributeStatusType = (isDistributed: number) => {
  return isDistributed === 1 ? 'success' : 'info'
}

// 获取分发状态文本
const getDistributeStatusText = (isDistributed: number) => {
  return isDistributed === 1 ? '已分发' : '未分发'
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 页面加载
onMounted(() => {
  // 检查页面参数，设置默认标签页
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1] as any
  const tabParam = currentPage?.options?.tab || currentPage?.$page?.options?.tab

  if (tabParam === 'send') {
    activeTab.value = 'send'
    loadSendData()
  } else {
    activeTab.value = 'receive'
    loadReceiveData()
  }
})
</script>

<style lang="scss" scoped>
.all-docs-container {
  height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;

  /* 顶部导航 */
  .nav-header {
    background: linear-gradient(135deg, #1a3582 0%, #1890ff 100%);
    padding: 46px 32rpx 20rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    flex-shrink: 0;

    .nav-left {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .back-icon {
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .nav-center {
      flex: 1;
      text-align: center;

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .nav-right {
      min-width: 22px;
    }
  }

  /* 搜索区域 */
  .search-section {
    background: white;
    position: relative;
    z-index: 3;
    flex-shrink: 0;

    .search-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 32rpx;
      cursor: pointer;
      transition: background 0.3s;

      &:active {
        background: #f8f9fa;
      }

      .search-header-left {
        display: flex;
        align-items: center;
        gap: 12rpx;

        .search-header-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }

      .search-header-right {
        display: flex;
        align-items: center;
        gap: 8rpx;

        .expand-text {
          font-size: 26rpx;
          color: #999;
        }
      }
    }

    .search-form {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      padding: 24rpx 32rpx;
      border-top: 1rpx solid #f0f0f0;

      .form-row {
        display: flex;
        align-items: center;
        width: 100%;

        .search-input {
          flex: 1;
          height: 80rpx;
          padding: 0 24rpx;
          border: 1rpx solid #e5e7eb;
          border-radius: 12rpx;
          font-size: 28rpx;
          background: #f8f9fa;
        }
      }

      .time-filter-row {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .filter-label {
          font-size: 28rpx;
          color: #333;
          white-space: nowrap;
          min-width: 120rpx;
        }

        .time-picker-group {
          flex: 1;
          display: flex;
          align-items: center;
          gap: 12rpx;
          position: relative;

          .time-mode-picker,
          .time-value-picker {
            flex: 1;
          }

          .time-mode-picker {
            max-width: 120rpx;
          }

          .time-value-picker {
            flex: 2;
          }

          .picker-input {
            padding: 16rpx 20rpx;
            background: #f8f9fa;
            border-radius: 12rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1rpx solid #e5e7eb;
            font-size: 28rpx;
            color: #333;
            transition: all 0.3s ease;

            &:active {
              background: #eef2f7;
              border-color: #1678ff;
            }

            &.mode-picker {
              text-align: center;
            }

            &.value-picker {
              .time-text {
                font-size: 28rpx;
                color: #333;

                &.placeholder {
                  color: #999;
                }
              }
            }
          }

          .clear-btn {
            position: absolute;
            right: 12rpx;
            z-index: 10;
            padding: 4rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
          }
        }
      }

      .search-buttons {
        display: flex;
        gap: 16rpx;
        justify-content: flex-end;

        .search-btn,
        .reset-btn {
          padding: 16rpx 32rpx;
          border-radius: 12rpx;
          font-size: 26rpx;
          text-align: center;
        }

        .search-btn {
          background: #1678ff;
          color: white;
        }

        .reset-btn {
          background: #f3f4f6;
          color: #666;
        }
      }
    }
  }

  /* 状态切换 */
  .status-switch {
    padding: 24rpx 32rpx;
    display: flex;
    gap: 16rpx;
    flex-shrink: 0;

    .status-tab {
      flex: 1;
      padding: 20rpx;
      background: white;
      border-radius: 12rpx;
      text-align: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12rpx;

      &.active {
        background: #1678ff;
        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);

        .tab-icon,
        .tab-text {
          color: white;
        }
      }

      .tab-icon {
        font-size: 28rpx;
        color: #666;
      }

      .tab-text {
        font-size: 28rpx;
        font-weight: 500;
        color: #666;
      }
    }
  }

  /* 列表区域 */
  .list-section {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .list-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 32rpx;
        background: white;
        flex-shrink: 0;

        .list-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }

        .list-count {
          font-size: 24rpx;
          color: #999;
        }
      }

      .list-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 0 32rpx 20rpx;

        .loading-state {
          text-align: center;
          padding: 60rpx 0;

          .loading-text {
            font-size: 28rpx;
            color: #999;
          }
        }

        .receive-list,
        .send-list {
          padding-bottom: 0rpx;

          .receive-item,
          .send-item {
            background: white;
            border-radius: 16rpx;
            padding: 24rpx;
            margin-bottom: 16rpx;
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;

            &:active {
              opacity: 0.8;
            }

            .item-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 16rpx;

              .item-title {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 12rpx;
                flex-wrap: wrap;

                .title-text {
                  font-size: 28rpx;
                  font-weight: 600;
                  color: #333;
                  flex: 1;
                  min-width: 0;
                }

                .urgency-badge {
                  padding: 6rpx 16rpx;
                  border-radius: 8rpx;
                  font-size: 20rpx;
                  flex-shrink: 0;

                  .badge-text {
                    font-size: 20rpx;
                  }

                  &.urgency-low {
                    background: #f0f9ff;
                    border: 1px solid #bae6fd;

                    .badge-text {
                      color: #0284c7;
                    }
                  }

                  &.urgency-normal {
                    background: #ecf5ff;
                    border: 1px solid #d9ecff;

                    .badge-text {
                      color: #1890ff;
                    }
                  }

                  &.urgency-high {
                    background: #fef3c7;
                    border: 1px solid #fde68a;

                    .badge-text {
                      color: #d97706;
                    }
                  }

                  &.urgency-urgent {
                    background: #fee2e2;
                    border: 1px solid #fecaca;

                    .badge-text {
                      color: #dc2626;
                    }
                  }
                }

                .category-badge {
                  padding: 6rpx 16rpx;
                  border-radius: 8rpx;
                  font-size: 20rpx;
                  background: #ecf5ff;
                  border: 1px solid #d9ecff;
                  flex-shrink: 0;

                  .badge-text {
                    color: #1890ff;
                    font-size: 20rpx;
                  }
                }

                .category-badge-party {
                  padding: 6rpx 16rpx;
                  border-radius: 8rpx;
                  font-size: 20rpx;
                  background: #f0f9eb;
                  border: 1px solid #e1f3d8;
                  flex-shrink: 0;

                  .badge-text {
                    color: #67c23a;
                    font-size: 20rpx;
                  }
                }
              }

              .item-time {
                font-size: 22rpx;
                color: #ccc;
                flex-shrink: 0;
                margin-left: 4px;
              }
            }

            .item-content {
              margin-bottom: 16rpx;

              .item-desc {
                display: block;
                font-size: 24rpx;
                color: #999;
                line-height: 1.5;
                margin-bottom: 6rpx;
              }
            }

            .item-footer {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .item-info {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 16rpx;
                flex-wrap: wrap;

                .info-text {
                  font-size: 22rpx;
                  color: #ccc;
                }

                .distribute-status {
                  padding: 4rpx 8rpx;
                  border-radius: 6rpx;
                  background: #f0f0f0;
                  display: flex;
                  align-items: center;

                  &.distributed {
                    background: #e8f5e9;

                    .status-text {
                      color: #2e7d32;
                    }
                  }

                  .status-text {
                    font-size: 20rpx;
                    color: #999;
                  }
                }
              }

              .item-actions {
                display: flex;
                gap: 20rpx;

                .action-btn {
                  padding: 10rpx 20rpx;
                  border-radius: 8rpx;
                  font-size: 30rpx;
                  color: #666;
                  background: #f5f7fa;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  &.primary {
                    background: #1678ff;
                    color: white;
                  }
                }
              }
            }
          }
        }

        .empty-state {
          text-align: center;
          padding: 80rpx 0;

          .empty-icon {
            font-size: 80rpx;
            display: block;
            margin-bottom: 24rpx;
          }

          .empty-text {
            font-size: 28rpx;
            color: #999;
          }
        }
      }

      /* 分页固定底部 */
      .pagination-section {
        padding: 20rpx 32rpx;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        border-top: 1rpx solid #e5e7eb;
        box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);

        .pagination-info {
          font-size: 26rpx;
          color: #666;
          font-weight: 500;
        }

        .pagination-buttons {
          display: flex;
          gap: 12rpx;

          .page-btn {
            padding: 12rpx 24rpx;
            border-radius: 12rpx;
            font-size: 26rpx;
            background: #1678ff;
            color: white;
            transition: all 0.3s ease;

            &:active:not(.disabled) {
              opacity: 0.8;
              transform: scale(0.95);
            }

            &.disabled {
              opacity: 0.4;
              background: #d1d5db;
              color: #9ca3af;
            }
          }
        }
      }
    }
  }
}
</style>
